<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01_基本使用</title>
  <style>
    .outer{
      width: 1300px;
      height: 200px;
      border: 1px solid black;  
    }
    .inner{
      width: 200px;
      height: 200px;
      background-color: skyblue;
      animation-name: wangyouyi2;
      animation-duration: 3s;
      animation-delay: 0.5s;
      
    }
    /* 第一种方式 */
    @keyframes wangyouyi{

        /* 第一帧 */
        form{

        }
        /* 最后一帧 */
        to{
          /* x方向移动900px */
          transform: translate(1100px);
          background-color: red;
          
        }

    }
    @keyframes wangyouyi2{
      /* 第一帧 */
      0%{
        background-color: skyblue;
      }
      38%{
        background-color: blue;
      }

      67%{
        background-color: lightgreen;
      }
      88%{
        background-color: yellow;
      }
       /* 最后一帧 */
      100%{
        background-color: black;
        transform: translate(1100px) rotate(360deg);
        border-radius: 50%;
      }
    }


  </style>
</head>
<body>
  <div class="outer">
    <div class="inner"></div>
  </div>
  
</body>
</html>